<!DOCTYPE html>
<html lang="utf-8">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>大唐软件运营商事业部-每天学一点，每天强一点</title>
        <#include "./common/res.html">
		<#include "./common/reslist.html">
		<link rel="stylesheet" href="${s.base}/res/css/colorbox.css">
		<style type="text/css">
            .r {
                float: right;
            }
			.pr {
				position: relative;
			}

			.w {
				max-width: 1152px;
				margin: 0 auto;
			}

			#main{
				color: #1c1f21;
				background: #f8fafc;
				min-height: 750px;
			}

			.course-infos {
				position: relative;
				background-color: #172a34;
			}

			.course-infos .w {
				height: 200px;
			}


			.course-infos .path {
				position: relative;
				z-index: 1;
				padding-top: 16px;
				padding-bottom: 24px;
				line-height: 24px;
				font-size: 12px;
				opacity: 1;
				filter: alpha(opacity=100);
			}
			.course-infos .path a,.path .path-split {
				color: rgba(255,255,255,.5);
				display: inline;
			}
			.course-infos .path a:hover{
				color: #FFF;
			}
			.path .path-split {
				margin: 0 8px;
			}

			.course-infos .hd {
				clear: both;
			}

			.course-infos h2 {
				position: relative;
				z-index: 1;
				margin-bottom: 8px;
				line-height: 48px;
				font-size: 32px;
				color: #fff;
			}

			.course-infos .statics {
				color: #fff;
				font-size: 0;
				position: relative;
				z-index: 3;
			}

			.course-infos .statics .teacher-info {
				position: relative;
				padding-left: 56px;
				padding-right: 60px;
				line-height: 12px;
				font-size: 12px;
			}
			.course-infos .statics .teacher-info a{
				display: inline;
			}

			.course-infos .statics .teacher-info img {
				float: left;
				margin-left: -56px;
				width: 48px;
				height: 48px;
				border-radius: 100%;
			}

			.course-infos .statics .teacher-info .tit {
				display: block;
				margin-top: 3px;
			}

			.course-infos .statics .teacher-info .tit a {
				color: #FFFFFF;
			}

			.course-infos .statics .teacher-info .icon-imooc {
				color: #f01400;
				font-size: 16px;
				margin: 0 0 0 8px;
				vertical-align: -2px;
			}

			.course-infos .statics .static-item {
				display: inline-block;
				position: relative;
				margin-right: 16px;
				font-size: 12px;
				top: 15px;
			}

			.course-infos .statics .static-item::after {
				margin-left: 16px;
				content: "·";
			}

			.course-infos .statics .score-btn::after {
				content: "";
			}

			.course-infos .statics .static-item .meta {
				padding-right: 8px;
				line-height: 12px;
				font-size: 12px;
				font-weight: 700;
			}


			.course-infos .extra {
				position: absolute;
				right: 0;
				top: 24px;
				z-index: 1;
			}

			.course-infos .info-bg, .course-infos .info-bg .cover-canvas,
			.course-infos .info-bg .cover-img-wrap, .course-infos .info-bg .cover-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.course-infos .info-bg, .course-infos .info-bg .cover-img-wrap {
				z-index: 0;
				overflow: hidden;
			}

			.course-infos .info-bg .cover-mask {
				filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr="#cc000000", endcolorstr="#33000000", gradientType=1);
			}


			.course-info-menu {
				height: 68px;
				line-height: 68px;
				background: #fff;
				box-shadow: 0 4px 8px 0 rgba(28,31,33,.1);
			}

			.course-info-menu .w {
				position: relative;
			}
			.course-info-menu .course-menu ul {
				line-height: 68px;
			}
			.course-info-menu .course-menu li {
				float: left;
				text-align: center;
				margin-right: 12px;
				position: relative;
				line-height: 68px;
			}

			.course-info-menu .course-menu li span {
				position: absolute;
				font-size: 12px;
				font-weight: 200;
				color: #9199a1;
				line-height: 18px;
				top: 10px;
				left: 64px;
			}
			.course-info-menu .course-menu a {
				margin-right: 80px;
				padding: 0;
			}

			.moco-change-big-btn {
				display: inline-block;
				padding: 0 16px;
				font-size: 16px;
				color: #545c63;
				line-height: 37px;
				font-weight: bold;
				cursor: pointer;
			}

			.moco-change-big-btn.active {
				position: relative;
				color: #f20d0d !important;
				cursor: default;
			}

			.moco-change-big-btn.active::after {
				margin: 0 auto;
				content: '';
				display: block;
				width: 16px;
				border-radius: 2px;
				height: 3px;
				background: #f20d0d;
			}

			.moco-change-big-btn:hover {
				color: #f20d0d;
			}


			.course-info-main {
				margin-bottom: 40px;
			}

			.course-info-main .content-wrap {
				padding-right: 352px;
				margin-bottom: 29px;
				overflow: visible;
			}

			.course-info-main .content {
				padding-top: 36px;
				width: 100%;
                float: left;
			}

			.course-description {
				line-height: 28px;
			}
			.course-wrap {
				margin-bottom: 8px;
				padding: 24px 32px 32px;
				background: #FFF;
				box-shadow: 0 8px 16px 0 rgba(7,17,27,.1);
				border-radius: 12px;
			}

			.course-chapters .chapter h3 {
				color: #1c1f21;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
			}

			.course-chapters .chapter .chapter-description {
				margin-top: 2px;
				font-size: 12px;
				color: #545C63;
				line-height: 18px;
			}

			.course-chapters .chapter .video {
				padding-top: 16px;
			}

			.course-chapters .chapter .video li {
				position: relative;
				padding-left: 12px;
				height: 48px;
				line-height: 48px;
				list-style: none;
			}
			.course-chapters .chapter .video li:hover {
				background: rgba(242,13,13,.05);
				border-radius: 4px;
				color: #F20D0D;
			}
			.course-chapters .chapter .video li a {
				color: #1c1f21;
				display: block;
				overflow: hidden;
				word-break: break-all;
			}

			.course-chapters .chapter .video li a:hover,
			.course-chapters .chapter .video li a:hover i{
				color: #F20D0D;
			}

			.course-chapters .chapter .video li .done,
			.course-chapters .chapter .video li .ing,
            .course-chapters .chapter .video li .start{
				position: absolute;
				right: 12px;
				top: 50%;
				margin-top: -9px;
				font-size: 16px;
				color: #00b43c;
			}
            .course-chapters .chapter .video li .start{
                color: #d9dde1;
            }

			.course-chapters .chapter .video li a .type {
				font-size: 24px;
				color: #9199A1;
				line-height: 24px;
				position: relative;
				top: 3px;
				margin-right: 4px;
			}

			/*右侧悬浮学习进度*/
            .course-info-main .aside {
                margin-top: -148px;
                margin-right: -352px;
                width: 320px;
                position: relative;
                z-index: 2;
            }
			.course-info-main .aside h4 {
				font-weight: 700;
				font-size: 14px;
			}
            .course-aside-info {
                margin-bottom: 32px;
                min-height: 150px;
            }

            .course-info-main .aside .learn-info {
                text-align: right;
                font-size: 12px;
                line-height: 18px;
            }

            .course-info-main .aside .learn-info span {
                float: left;
                font-weight: 700;
                font-size: 16px;
                line-height: 24px;
            }

            .progress {
                display: inline-block;
            }
            .course-info-main .aside .progress {
                margin: 9px 0 24px;
                width: 100%;
                height: 16px;
                background: rgba(28,31,33,.1);
                border-radius: 8px;
            }

            .course-info-main .aside .progress ins {
                height: 16px;
                content: "";
                width: 0;
                transition: 2s width;
                background: #F20D0D;
                border-radius: 8px;
            }

            .course-info-main .aside .learn-info-media {
                margin-bottom: 12px;
                font-size: 12px;
                color: #545C63;
                line-height: 18px;
            }

            .moco-btn {
                position: relative;
                display: inline-block;
                margin-bottom: 0;
                text-align: center;
                vertical-align: middle;
                touch-action: manipulation;
                text-decoration: none;
                box-sizing: border-box;
                background-image: none;
                border-radius: 0;
                -webkit-appearance: none;
                white-space: nowrap;
                outline: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                border-style: solid;
                border-width: 1px;
                cursor: pointer;
                -weibkit-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
                color: #545c63;
                background-color: transparent;
                border-color: #9199a1;
                opacity: 1;
                padding: 7px 16px;
                font-size: 14px;
                line-height: 1.42857143;
                border-radius: 18px;
            }

            .moco-btn-lg {
                padding: 11px 32px;
                font-size: 16px;
                line-height: 24px;
                border-radius: 24px;
            }

            .moco-btn-red {
                border-style: solid;
                border-width: 1px;
                cursor: pointer;
                -weibkit-transition: all .3s;
                -moz-transition: all .3s;
                transition: all .3s;
                color: #fff;
                background-color: #f20d0d;
                border-color: #f20d0d;
                opacity: 1;
            }

            .course-info-main .aside .learn-btn a {
                display: block;
            }

            .moco-btn-red:hover, .moco-btn-red:focus, .moco-btn-red.focus, .moco-btn-red:active, .moco-btn-red.active {
                color: #fff;
                border-color: #c20a0a;
                background: #c20a0a;
                opacity: 1;
            }

            .course-info-main .aside .course-info-tip {
                padding-top: 24px;
            }

            .course-info-main .aside .course-info-tip dl.first {
                margin-bottom: 24px;
            }

            .course-info-main .aside .course-info-tip dt {
                margin-bottom: 6px;
                font-weight: 700;
                font-size: 14px;
            }

            .course-info-main .aside .course-info-tip dd {
                font-size: 12px;
                line-height: 24px;
                color: #545C63;
                white-space: pre-line;
            }

            .autowrap {
                word-wrap: break-word;
                word-break: break-all;
            }

			.moco-aside-course li {
				margin-bottom: 8px;
			}

			.moco-aside-course li .aside-course-img {
				float: left;
				width: 80px;
				height: 60px;
				border-radius: 6px;
				overflow: hidden;
				position: relative;
			}

			.moco-aside-course li .aside-course-img img {
				width: 80px;
				height: 60px;
				border-radius: 6px;
			}

			.moco-aside-course li .aside-course-img .aside-course-type {
				position: absolute;
				left: 0;
				top: 0;
				font-size: 12px;
				color: #FFFFFF;
				line-height: 18px;
				padding: 2px 4px;
				background: #1C1F21;
				border-radius: 6px 0 6px 0;
			}
			.moco-aside-course li .aside-course-content {
				margin-left: 96px;
				height: 67px;
				position: relative;
				box-sizing: border-box;
				font-size: 12px;
				color: #545C63;
				line-height: 18px;
				border-bottom: 1px solid rgba(43,51,59,0.1);
			}

			.moco-aside-course li .aside-course-content a.aside-course-name {
				padding-top: 8px;
				font-size: 14px;
				height: 22px;
				line-height: 22px;
				margin-bottom: 4px;
				cursor: pointer;
				color: #545C63;
				background: #f8fafc;
				-webkit-transition: all .3s;
				-moz-transition: all .3s;
				transition: all .3s;
				display: block;
				box-sizing: initial;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.moco-aside-course li .aside-course-content:hover a.aside-course-name {
				position: absolute;
				color: #1c1f21;
				overflow: hidden;
				height: auto;
				max-height: 44px;
				white-space: initial;
			}

			.moco-aside-course li .aside-course-content .aside-course-price {
				font-weight: bold;
			}

			.moco-aside-course li .aside-course-content .aside-course-dot {
				margin-left: 1px;
				margin-right: 1px;
			}

			.moco-aside-course li .aside-course-content .aside-course-price,
			.moco-aside-course li .aside-course-content .aside-course-grade,
			.moco-aside-course li .aside-course-content .aside-course-people,
			.moco-aside-course li .aside-course-content .aside-course-dot {
				float: left;
			}

			.all-attention-box h4,
			.recom-course-list-box h4{
				margin-bottom: 12px;
			}

			.all-attention a {
				display: inline-block;
				margin-right: 8px;
				margin-bottom: 8px;
				padding: 6px 12px;
				font-size: 14px;
				line-height: 20px;
				border-radius: 16px;
			}

			.all-attention a:hover {
				opacity: .8;
			}

			.all-attention .style1 {
				color: #fff;
				background: rgba(255,204,0,.5);
			}
			.all-attention .style2 {
				color: #fff;
				background: rgba(255,153,0,.5);
			}

			.all-attention .style3 {
				color: #F60;
				background: rgba(255,102,0,.1);
			}

			.all-attention .style4 {
				color: #fff;
				background: rgba(255,51,0,.5);
			}

			.all-attention .style5 {
				color: #F90;
				background: rgba(255,153,0,.1);
			}

			.all-attention .style6 {
				color: #fff;
				background: rgba(255,102,0,.5);
			}
		</style>
        <!-- canvas处理工具 -->
        <script type="text/javascript" src="/res/js/cropper.js"></script>
	</head>

	<body>
		<#include "./common/header.html">
		<div id="main">
			<!-- 课程信息-->
			<div class="course-infos">
				<div class="w pr">
					<div class="path">
						<a href="/course/list">课程</a>
						<i class="path-split">\</i><a href="/course/list?c=cb">云计算&amp;大数据</a>
						<i class="path-split">\</i><a href="/course/list?c=cloudcomputing">云计算</a>
						<i class="path-split">\</i><a href="/learn/272"><span>${(course.name)!}</span></a>
					</div>
					<div class="hd clearfix">
						<h2 class="l">${(course.name)!}</h2>
					</div>

					<div class="statics clearfix">
						<div class="teacher-info l">
                            <!-- 老师头像信息
                             TODO:点击头像，进入该讲师所授课程列表-->
							<a href="" target="_blank">
                                <#if courseTeacher.header?? && courseTeacher.header != ''>
                                <img class="js-usercard-dialog" src="${courseTeacher.header!}" width="80" height="80">
                                <#else>
                                <img class="js-usercard-dialog" src="${s.base}/res/i/header.jpg" width="80" height="80">
                                </#if>
							</a>
							<span class="tit">
                                <a href="/u/1132220/courses?sort=publish" target="_blank">
                                    ${(courseTeacher.realname)!""}
                                </a>
                                <!--<i class="icon-imooc"></i>-->
                            </span>
							<span class="job">
                                ${(courseTeacher.collegeName)!""} · ${(courseTeacher.education)!""}
                            </span>
						</div>

						<div class="static-item l">
							<span class="meta">难度</span>
                            <span class="meta-value">
                            <#if course?? && course.level??>
                                <#if course.level == 1>
                                初级
                                <#elseif course.level == 2>
                                中级
                                <#else>
                                高级
                                </#if>
                            </#if>
                            </span>
						</div>
						<div class="static-item l">
							<span class="meta">时长</span><span class="meta-value">${(course.time)!}</span>
						</div>
						<div class="static-item l">
							<span class="meta">学习人数</span><span class="meta-value js-learn-num">${(course.studyCount)!}</span>
						</div>
						<div class="static-item l score-btn">
							<span class="meta">综合评分</span><span class="meta-value">9.6</span>
						</div>

					</div>
					<div class="extra">

						<!-- credit -->

						<!-- share -->
						<div class="share-action r bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1541166754727">
							<!--收藏-->
							<div class="share js-follow-action" data-cid="272" data-cmd="follow" title="收藏"><i class="follow-action icon-star_outline"></i><span>收藏</span></div>
							<a href="javascript:;" class="share wx js-share icon-share-weichat" data-cmd="weixin" title="分享到微信"></a>
							<a href="javascript:;" class="share qq js-share icon-share-qq" data-cmd="qzone" title="分享到QQ空间"></a>
							<a href="javascript:;" class="share sina js-share icon-share-weibo" data-cmd="tsina" title="分享到新浪微博"></a>
						</div>
					</div>
				</div>
                <!-- 课程信息 -->
				<div class="info-bg" id="js-info-bg">
					<div class="cover-img-wrap">
                        <!-- 暂时采用默认图片，后修改为课程图片 -->
						<img data-src="http://img.qingzhidian.com/@/default/all/0/2b003f0c981646199219ab5e9552e768.jpeg?e=1541475152&token=RncKbgKoRpe_8RUW5AuRlqBWcRTkUjGIZ0d9byAF:-OlD8kkeT6PW2qRHkDvCyUJbRBM=" alt="" style="display: none" id="js-cover-img">
					</div>
					<div class="cover-mask"></div>
					<canvas width="1903" height="200" class="cover-canvas" id="js-cover-canvas"></canvas>
                </div>
			</div>

			<!-- 内容分类-->
			<div class="course-info-menu green-box">
				<div class="w">
					<ul class="course-menu">
						<li><a class="moco-change-big-btn active" id="learnOn" href="/learn/272">课程章节</a></li>

						<li><span>313</span><a id="qaOn" class="moco-change-big-btn " href="/qa/272/t/0">问答评论</a></li>
						<li><a id="noteOn" class="moco-change-big-btn " href="/note/272?sort=last&amp;page=1">同学笔记</a></li>
						<li><span>44</span><a id="commentOn" class="moco-change-big-btn " href="/coursescore/272">用户评价</a></li>
					</ul>
				</div>
			</div>

			<!-- 课程面板 -->
			<div class="course-info-main clearfix w">

				<div class="content-wrap clearfix">
					<div class="content">
						<!-- 课程公告 -->
						<!-- 课程简介 -->
						<div class="course-description course-wrap">
                            ${(course.brief)!}
						</div>
						<!-- 课程简介 end -->


						<!-- 课程章节 -->
						<div class="course-chapters">
							<#if chaptSections??>
							<#list chaptSections as item>
							<div class="chapter course-wrap chapter-active">
								<!-- 章节标题 -->
								<h3>
									${item.name!}
								</h3>
								<div class="chapter-description">
									<!--${item.desc!}-->这一段落提供章节描述信息.
								</div>
								<!-- 章节标题 end -->
								<!-- 章节小节 -->
								<ul class="video">
									<#if item.sections??>
									<#list item.sections as section>
									<li>
										<a href="${s.base}/course/video/${section.id!}.html" class="J-media-item">
										<!--<a href="${section.videoUrl!}" class="J-media-item">-->
                                            <#if section_index == 0 >
                                                <i class="icon-tick-revert done"></i> <!-- 学习状态: 完成-->
                                            </#if>
                                            <#if section_index == 1 >
                                            <i class="icon-half ing"></i> <!-- 学习状态：正在学习-->
                                            </#if>
                                            <#if section_index gt 1 >
                                                <i class="icon-nolearn start"></i> <!-- 学习状态：未学习-->
                                            </#if>
											<i class="imv2-play_circle type"></i> <!--内容类型：视频、代码-->
											${section.name!}
											(${section.time!})
										</a>
									</li>
									</#list>
									</#if>
								</ul>
								<!-- 章节小节 end -->
							</div>
							</#list>
							</#if>
						</div>
						<!-- 课程章节 end -->
					</div><!--content end-->
					<ul class="aside r">
                        <!-- 学习进度面板 -->
						<div class="course-wrap course-aside-info js-usercard-box">
							<div class="learn-btn">
								<div class="learn-info">
									<span>已学 24% </span>学习耗时38分
								</div>
								<div class="progress">
									<ins data-progress="24" style="display: inline-block; width: 24%;"></ins>
								</div>
								<div class="learn-info-media">
                                    上次学至 ${(curCourseSection.name)!}
                                </div>
                                <!-- 如果之前学习过，显示继续学习，如果没有学过，显示开始学习 -->
								<a href="/video/9498" class="moco-btn moco-btn-red moco-btn-lg">继续学习</a>
							</div>
							<div class="course-info-tip">
								<dl>
									<dt>老师告诉你能学到什么？</dt>
									<dd class="autowrap">
                                        ${(course.brief)!}
									</dd>
								</dl>
							</div>
						</div>
                        <!-- 推荐课程面板 -->
						<div class="js-commend-box">
							<div class="mb40 recom-course-list-box">
                                <h4>推荐课程</h4>
                                <#if recomdCourseList?? && recomdCourseList?size gt 0 >
                                <ul class="js-recom-course moco-aside-course clearfix">
                                    <#list recomdCourseList as item>
                                    <li>
                                        <div class="aside-course-img">
                                            <#if (item.picture)?? && item.picture != ''>
                                            <img src="${item.picture!}" class="l">
                                            <#else>
                                            <img src="${s.base}/res/i/course.png" class="l">
                                            </#if>
                                            <p class="aside-course-type">实战</p>
                                        </div>
                                        <div class="aside-course-content">
                                            <a href="${s.base}/course/learn/${item.id}.html" class="aside-course-name" target="_blank">${item.name!}</a>
                                            <p class="aside-course-price"><span>￥148.00</span></p>
                                            <div class="aside-course-dot"><i class="imv2-dot_samll"></i></div>
                                            <p class="aside-course-grade">中级</p>
                                            <div class="aside-course-dot"><i class="imv2-dot_samll"></i></div>
                                            <p class="aside-course-people"><i class="imv2-set-sns"></i><span>445</span></p>
                                        </div>
                                    </li>
                                </#list>
                                </ul>
                                </#if>
                            </div>
                        </div>
                        <!-- 标签面板 -->
						<div class="js-tag-box">
                            <div class="mb40 all-attention-box">
                                <h4>热门专题标签</h4>
                                <div class="js-all-attention all-attention">
                                    <a href="//www.imooc.com/topic/jquery" target="_blank" data-id="24" class="style4">jQuery 实例教程</a>
                                    <a href="//www.imooc.com/topic/class" target="_blank" data-id="36" class="style6">小白入门</a>
                                    <a href="//www.imooc.com/topic/nodejs" target="_blank" data-id="26" class="style2">Node.js进阶教程</a>
                                    <a href="//www.imooc.com/topic/fangzhan" target="_blank" data-id="27" class="style1">如何仿站</a>
                                    <a href="//www.imooc.com/topic/spring" target="_blank" data-id="23" class="style4">spring 实例教程</a>
                                    <a href="//www.imooc.com/topic/fullstack" target="_blank" data-id="29" class="style5">全栈工程师</a>
                                    <a href="//www.imooc.com/topic/azmianshi" target="_blank" data-id="28" class="style3">Android面试题有哪些</a>
                                    <a href="//www.imooc.com/topic/mysql" target="_blank" data-id="25" class="style6">MySQL项目实例</a>
                                </div>
                            </div>
						</div>
                        <!-- 相关课程面板 -->
						<div class="js-related-box">
							<div class="mb40 recom-course-list-box">
                                <h4>相关课程</h4>
                                <ul class="js-recom-course moco-aside-course clearfix">
                                    <li><div class="aside-course-img">
                                        <img src="//img4.mukewang.com/5bc6e6b80001434f06000338-240-135.jpg">
                                    </div>
                                        <div class="aside-course-content">
                                            <a href="//www.imooc.com/learn/1064" class="aside-course-name" target="_blank">2018 AWS技术峰会 人工智能分论坛</a>
                                            <p class="aside-course-grade">高级</p>
                                            <div class="aside-course-dot"><i class="imv2-dot_samll"></i></div>
                                            <p class="aside-course-people"><i class="imv2-set-sns"></i><span>1334</span></p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="aside-course-img">
                                            <img src="//img.mukewang.com/5badc2980001ca6d06000338-240-135.jpg">
                                        </div>
                                        <div class="aside-course-content">
                                            <a href="//www.imooc.com/learn/1055" class="aside-course-name" target="_blank">2018 AWS技术峰会 大数据分论坛</a>
                                            <p class="aside-course-grade">高级</p>
                                            <div class="aside-course-dot"><i class="imv2-dot_samll"></i></div>
                                            <p class="aside-course-people"><i class="imv2-set-sns"></i><span>1323</span></p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
					</div> <!-- end aside r -->
				</div>
				<div class="clear"></div>
			</div>
		</div>

		<!--        ---------------------------------------------------------------        --->



		<div style="display: none">

		<div class="f-main clearfix">
			<div class="main-course-left">
					<!-- 基础信息 - start -->
					<div class="course-info">
						<div class="course-title">${(course.name)!}</div>
						
						<div class="course-meta">
							<a href="${s.base}/course/video/12.html" class="learn-btn" >继续学习</a>
							
							<div class="static-item"  >
								<div class="meta">上次学到</div>
								<div class="meta-value" title="${(curCourseSection.name)!}">${(curCourseSection.name)!}</div>
							</div>
							
							<div class="static-item"  >
								<div class="meta">学习人数</div>
								<div class="meta-value">${(course.studyCount)!}</div>
							</div>
							<div class="static-item">
								<div class="meta">难度级别</div>
								<div class="meta-value">
									<#if course?? && course.level??>
										<#if course.level == 1>
										初级
										<#elseif course.level == 2>
										中级
										<#else>
										高级
										</#if>
									</#if>
								</div>
							</div>
							<div class="static-item" style="border:none;">
								<div class="meta">课程时长</div>
								<div class="meta-value">${(course.time)!}</div>
							</div>
							<a id="collectionSpan" onclick="doCollect(${(course.id)!})" href="javascript:void(0)" class="following" style="float: right;margin-top:5px;" >
							</a>
						</div>
						
						<div class="course-brief">
								${(course.brief)!}
						</div>
						
						<div class="course-menu">
							<a  href="javascript:void(0)" >
							<span onclick="showTab(this,'courseSection')" class="menu-item cur">章节</span>
							</a>
							<a  href="javascript:void(0)" >
							<span onclick="showTab(this,'commentQA',0)" class="menu-item">评论</span>
							</a>
							<a  href="javascript:void(0)" >
							<span onclick="showTab(this,'commentQA',1)" class="menu-item">问答</span>
							</a>
						</div>
				</div>
				<!-- 基础信息 - end -->	
				
				<!-- 章节信息 - start -->
				<div id="courseSection">
					<#if chaptSections??>
					<#list chaptSections as item>
					<div class="chapter">
						<a href="javascript:void(0);" class="js-open">
							<h3>
								<strong><div class="icon-chapter">=</div>${item.name!}</strong>
								<span class="drop-down">▼</span> 
							</h3>
						</a>
						<ul class="chapter-sub">
							<#if item.sections??>
							<#list item.sections as section>
							<a href="${s.base}/course/video/${section.id!}.html" > 
								<li class="chapter-sub-li">
									<i class="icon-video">▶</i>${section.name!} (${section.time!})
								</li>
							</a>
							</#list>
							</#if>
						</ul>
					</div>
					</#list>
					</#if>
					
				</div>
				<!-- 章节信息 - end -->
				
				<!-- 评论区 start -->
				<div id="commentQA">
				</div>
				<!-- 评论区 end -->
			</div>
						
			<div class="main-course-right"  >
				<#if courseTeacher??>
				<div class="lecturer-item" style="width: 100%;">
					<#if courseTeacher.header?? && courseTeacher.header != ''>
					<img class="lecturer-uimg" src="${courseTeacher.header!}">
					<#else>
					<img class="lecturer-uimg" src="${s.base}/res/i/header.jpg">
					</#if>
					<span class="lecturer-name">${(courseTeacher.realname)!""}</span>
					<span class="lecturer-title">${(courseTeacher.collegeName)!""} · ${(courseTeacher.education)!""}</span>
					<span class="lecturer-p" >${(courseTeacher.title)!""}，${(courseTeacher.sign)!""}</span>
					<a href="javascript:void(0)"  onclick="doFollow('${(courseTeacher.id!)}');">
					<span id="followSpan" class="follow-btn">
					<#if followFlag?? && followFlag>
					已关注
					<#else>
					关注+
					</#if>
					</span>
					</a>
				</div>
				</#if>
				
				<h4 class="mt-50">推荐课程</h4>
				<#if recomdCourseList?? && recomdCourseList?size gt 0 >
				<#list recomdCourseList as item>
				<a href="${s.base}/course/learn/${item.id}.html" target="_black" class="mb-5" title="${item.name!}"><li class="ellipsis oc-color-hover">${item.name!}</li></a>
				</#list>
				</#if>
			</div>
			
		</div>

		</div>

		<#include "./common/footer.html">
		
		<script type="text/javascript">
		
			$(function(){

				//实现 章节鼠标焦点 动态效果
				// $('.chapter li').hover(function(){
				// 	$(this).find('.icon-video').css('color','#FFF');
				// },function(){
				// 	$(this).find('.icon-video').css('color','#777');
				// });
				//
				// $('.js-open').click(function(){
				// 	var display = $(this).parent().find('ul').css('display');
				// 	if(display == 'none'){
				// 		$(this).parent().find('ul').css('display','block');
				// 		$(this).find('.drop-down').html('▼');
				// 	}else{
				// 		$(this).parent().find('ul').css('display','none');
				// 		$(this).find('.drop-down').html('▲');
				// 	}
				// });
				
				if(SHIRO_LOGIN){
					//判断是否已经收藏
					var courseId = ${(course.id)!}
					if(courseId){
						var url = '${s.base}/collections/isCollection.html';
						doCollect(courseId,url);
					}
					//判断是否已经关注教师 
					var followId = ${(courseTeacher.id!)};
					if(followId){
						var url = '${s.base}/follow/isFollow.html';
						doFollow(followId,url);
					}
				}


                //视频弹出层
                //$(".J-media-item").colorbox({iframe:true, innerWidth:640, innerHeight:390,scrolling: false,closeButton: true});

                //renderCourseInfo();
			});

			/**
             * 渲染课程信息背景
             *
             * */
			function renderCourseInfo() {
                var canvas = document.getElementById('js-cover-canvas');
                var context = canvas.getContext('2d');
                var image = document.getElementById('js-cover-img');

                var $image = $('#js-cover-img');
                $image.cropper({
                    aspectRatio: 16 / 9,
                    movable: true,
                    dragMode:'move',
                    crop: function(e) {
                        // Output the result data for cropping image.
                    },
                    built: function () {
                        croppable = true;
                    }
                });
            }

			
			/**
			*展示tab commentQA
			**/
			function showTab(el,divId,type){
				$('.course-menu').find('span').each(function(i,item){
					$(item).removeClass('cur');
				});
				$(el).addClass('cur');
				
				if(divId == 'courseSection'){
					$('#courseSection').show();
					$('#commentQA').hide();
				}else {
					$('#commentQA').show();
					$('#courseSection').hide();
					_queryPage(1,type);//默认加载 第 1 页
				}
			}
			
			/**
			*加载 课程评论 & 问答 
			* courseId：课程id
			* sectionId: 章节id
			* type : 类型 0-评论；1-答疑 
			*/
			var _type = 0; //全局变量 
			function _queryPage(pageNum,type){
				if(type == undefined)
					type = _type;
				else
					_type = type;
				//加载评论或者QA
				if(pageNum == undefined)
					pageNum = 1;
				var courseId = ${(course.id)!};//课程id
				var url = '${s.base}/courseComment/segment.html';
				$("#commentQA").load(
							url,
							{'courseId':courseId,'type':type,'pageNum':pageNum},
							function(){}
						);
			};
			
			//收藏 
			function doCollect(courseId,url){
				if(url == undefined){
					url = '${s.base}/collections/doCollection.html';
				}
				//处理收藏 
				$.ajax({
					url:url,
				    type:'POST',
				    dataType:'json',
				    data:{"courseId":courseId},
				    success:function(resp){
				    	if(resp.errcode == 1){//已收藏 
				    		$('#collectionSpan').attr('class','followed');
				    	}else if(resp.errcode == 0){//未收藏  
				    		$('#collectionSpan').attr('class','following');
				    	}
				    } 
				});
			}
			
			//关注 
			function doFollow(followId,url){
				if(url == undefined){
					url = '${s.base}/follow/doFollow.html';
				}
				$.ajax({
					url:url,
				    type:'POST',
				    dataType:'json',
				    data:{"followId":followId},
				    success:function(resp){
				    	if(resp.errcode == 1){
				    		$('#followSpan').html('已关注');
				    	}else if(resp.errcode == 0){
				    		$('#followSpan').html('+关注');
				    	}
				    } 
				});
			}

		</script>
		
	</body>
	
</html>
